<template>
  <div class="ReplyChatDia">
    <MyDialog v-bind="$attrs">
      <!-- 聊天展示框 -->
      <div class="chat">
        <el-scrollbar style="height: 10000px">
          <!-- 聊天内容 -->
          <div class="chat_content">
            <!-- 自己 -->
            <div class="myself">
              <!-- 头像 -->
              <div class="avatar">
                <!-- 内容 -->
                <div class="content">
                  <p>你好</p>
                </div>
                <img src="@/assets/userInfo.png" alt="" />
              </div>
            </div>
            <!-- 别人 -->
            <div class="older">
              <!-- 头像 -->
              <div class="avatar">
                <img src="@/assets/userInfo.png" alt="" />
                <!-- 内容 -->
                <div class="content">
                  <p>你好</p>
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <div class="chat_input">
        <!-- 聊天输入框 -->
        <input type="text" placeholder="请输入" />
        <el-button type="primary">发送</el-button>
      </div>
    </MyDialog>
  </div>
</template>

<script setup>
import MyDialog from "@/components/base/MyDialog.vue";
import { defineOptions } from "vue";
defineOptions({
  inheritAttrs: false,
});
</script>
<style scoped lang="scss">
/deep/ .el-scrollbar { .el-scrollbar__wrap {
    height: 1000px;
    overflow-x: hidden;
  }
}
.ReplyChatDia {
  .chat {
    height: 800px;
    border: 1px solid #ccc;
    border-radius: 10px;
    .chat_content {
      .myself {
        .avatar {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
          }
          .content {
            margin-right: 10px;
          }
        }
      }
      .older {
        .avatar {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
          }
          .content {
            margin-left: 10px;
          }
        }
      }
    }
  }
  .chat_input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    input {
      flex: 1;
      height: 30px;
      border-radius: 15px;
      border: 1px solid #ccc;
      padding: 0 10px;
      margin-right: 10px;
    }
  }
}
</style>
